
<template>
  <bread>
    <breaditem to="http://www.baidu.com"> afshioas</breaditem>
    <breaditem @click="fn"> aqwafpasdfasfasfd</breaditem>
    <breaditem> aqwafp</breaditem>
    <breaditem> aqwafp</breaditem>

  </bread>
  <div>
     <transition name="ac" mode="out-in">
       <div v-if="show">
         <span >123456</span>
       </div>

    </transition>
  </div>
</template>
<script>
import { ref } from 'vue'
import bread from './bread.vue'
import breaditem from './breaditem.vue'
export default {
  components: {
    bread, breaditem
  },
  setup () {
    const show = ref(false)
    const fn = () => {
      show.value = !show.value
    }
    return { fn, show }
  }

}
</script>
<style lang="less" scoped>
.iframe{
width: 500px;
height: 500px;
}
.ac-enter-to,.ac-leave-from{

opacity: 1;
transform: none;
}
.ac-enter-active,.ac-leave-active{
  transition: all 2s;
}

.ac-enter-from,.ac-leave-to{
  transform: translate3d(20px,88px,0);
      opacity: 0;

}
</style>
